<template>
    <div v-loading="loading">

        <div class="settingDevicesSearch">
            <el-form :inline="true" >

                <el-form-item label="服务" style="margin-left: 100px;">
                    <el-input v-model="name" placeholder="请输入服务"></el-input>
                </el-form-item>

                <el-button type="primary" icon="el-icon-search" circle @click="handelSearch"></el-button>
                <el-button round @click="handleReset">重置</el-button>

            </el-form>

        </div>

        <div class="settingDevicesTable">
            <el-table
                    :data="list"
                    border
                    style="width: 731px">

                <el-table-column
                        align="center"
                        prop="name"
                        label="服务"
                        width="180">
                </el-table-column>

                <el-table-column
                        align="center"
                        prop="sort"
                        label="排序"
                        width="100">
                </el-table-column>

                <el-table-column
                        width="300"
                        align="center"
                        prop="create_time"
                        label="创建时间">
                </el-table-column>

                <el-table-column align="center" width="150">
                    <template slot-scope="scope">
                        <el-button
                                @click="settingDevicesDelete(scope.row.id)"
                                icon="el-icon-delete"
                                type="danger">删除
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>

        <div class="settingDevicesPage">
            <el-pagination
                    v-if="settingDevicesVisible"
                    @current-change="settingDevicesPage"
                    :page-size="10"
                    layout="prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>

    </div>

</template>

<script>
    export default {
        name: 'settingDevices',
        data(){
            return{
                list: [],
                loading: false,
                total: 0,
                name: '',
                settingDevicesVisible: true
            }
        },
        methods:{
            defaultData(page, name){
                this.loading = true;
                this.$http.get('/store/devices/list',{
                    params:{
                        token: localStorage.getItem('user_token'),
                        page: page,
                        pageSize: 10,
                        name: name,
                        store_id: localStorage.getItem('user_store_id')
                    }
                }).then( response => {
                    if (response.data.status === 'success'){
                        this.list = response.data.data.list;
                        this.total = response.data.data.pagination.total

                        if (response.data.data.pagination.total < 10){
                            this.settingDevicesVisible = false;
                        }
                    }
                    this.loading = false;
                }).catch( () => {
                    this.loading = false;
                })
            },

            //搜索
            handelSearch(){
                this.defaultData(1, this.name)
            },

            //重置
            handleReset(){
                this.name = '';
                this.defaultData();
            },

            //删除
            settingDevicesDelete(id){
                this.$confirm('是否删除该服务？','删除服务',{
                    cancelButtonText: '否',
                    confirmButtonText: '是',
                    type: 'warning'
                }).then( () => {
                    this.loading = true;
                    this.$http.get('/store/devices/del',{
                        params: {
                            token: localStorage.getItem('user_token'),
                            id: id
                        }
                    }).then(response => {
                        if (response.data.status === 'success'){
                            this.$message.success('删除成功');
                            this.defaultData();
                        }
                        this.loading = false;
                    }).catch( () => {
                        this.loading = false;
                    })

                })
            },

            settingDevicesPage(page){
                this.defaultData(page)
            }
        },
        mounted() {
            this.defaultData();
        }
    }
</script>

<style>
    .settingDevicesTable{
        margin-left: 250px;
    }

    .settingDevicesSearch{
        height: 80px;
        width: 1360px;
        margin-left: 360px;
        margin-top: 40px;
    }

    .settingDevicesPage{
        margin-top: 24px;
        margin-left: 750px;
    }
</style>
